<template>
    <div>
        <mt-header class="plain" fixed>
            <mt-button slot="left" @click="goBack" icon="back">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>
        
        <div class="search-container pt-2 pb-4">
            <div class="search">
                <!-- <input type="text" class="search-core"> -->
                <div class="search-core">
                    <mt-field class="for-serach" v-model="searchText"></mt-field>
                </div>
            </div>
        </div>

        <div class="search-list ">
            <div class="info-block text-justify" v-for="item in data" :key="item.id">
                <div class="info-title" @click="showDetail(item)">{{item.title}}</div>
                <div class="info-desc">{{item.desc}}</div>
                <div class="info-time">{{item.time}}</div>
            </div>
            <div v-if="!data || !data[0]"></div>
        </div>
    </div>
</template>

<script>

import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import infoApi from '@/api/info'

export default {
    data() {
        return {
            searchText: '',
            searching: false,
            data: [{
                id: '00001',
                title: '你说什么你说什么你说什么你说什么你说什么你说什么',
                desc: '我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清',
                time: '2018-06-22'
            }, {
                id: '00002',
                title: '你说什么你说什么你说什么你说什么你说什么你说什么2',
                desc: '我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清2',
                time: '2018-06-22'
            }, {
                id: '00003',
                title: '你说什么你说什么你说什么你说什么你说什么你说什么3',
                desc: '我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清3',
                time: '2018-06-22'
            }, {
                id: '00004',
                title: '你说什么你说什么你说什么你说什么你说什么你说什么4',
                desc: '我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清我看不清4',
                time: '2018-06-22'
            }]
        }
    },

    created() {
        this.data = [];
    },

    watch: {
        searchText: function() {
            this.list();
        }
    },

    methods: {
        list() {
            infoApi
        },
        
        showDetail(item) {
            this.$router.push({path: '/information/detail', query: {id: item.id}});
        },
        
        goBack() {
            this.$router.replace({path: '/information/detail', query: {id: this.$route.query.id}});
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.search-container {
    position: fixed;
    margin-top: 55px;
    padding-left: $offset-x;
    padding-right: $offset-x;
    border-bottom: 10px solid #eeeeee;
    width: 100%;
    background: #ffffff;
    .search {
        height: 36px;
        border-radius: 5px;
        border: 1px solid #bdbdbd;
        padding: 2px 5px 0 15px;
        background: #f5f5f5;
        .search-core {
            font-size: 14px * $scale;
            color: #787878;
            height: 100%;
        }
    }
}

.search-list {
    padding-top: 120px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    .info-block {
        
        border-bottom: 1px solid #efefef;
        padding: 16px 0;

        .info-title {
            font-size: 16px * $scale;
            color: #000000;
            line-height: 22px;
            margin-bottom: 12px;
        }

        .info-desc {
            font-size: 12px * $scale;
            color: #333333;
            line-height: 18px;
            margin-bottom: 18px;
        }

        .info-time {
            font-size: 11px * $scale;
            color: #999999;
        }
    }

    .info-block:last-child {
        border-bottom: none;
    }
}

</style>
